<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>盲盒详情</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/main.css" />
		<script src="js/tailwindcss.js"></script>
	</head>
	<style>
		body {
			background: #2a3139;
		}

		.mui-bar-tab {
			padding: 0 0.625rem;
			background: #2a3139;
		}

		.mui-bar {
			box-shadow: none;
		}

		.mui-bar-tab button {
			width: 100%;
			background: #ff4f00;
			border: none;
			border-radius: 2.125rem;
			color: #ffffff;

		}

		.mui-bar .mui-btn {
			padding: 8px 12px;
		}

		.mui-bar,
		.mui-title {
			background: #2a3139 !important;
			color: #ffffff;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">盲盒详情</h1>
		</header>
		<div class="mui-content">

			<div class="blind-box-details-content">
				<div class="blind-box-details">
					<img src="images/pic_01.png" alt="" style="width: 9.375rem;" />
					<div class="blind-box-details-price">
						<span>开箱有礼 ￥0.01 / 个</span>
					</div>
					<div style="color: #ffffff;">开箱必出以下宝贝之一</div>
					<div class="blind-box-details-tips">不满意可置换或兑换</div>
				</div>
				<div style="padding: 0.625rem;">
					<div class="blind-box-cont">
						<div class="blind-box-probability">
							<div>
								<img src="images/ico_44.png" alt="" srcset="" style="width: 1.875rem;" />
								<div class="mt-1">100%</div>
							</div>
							<div>
								<img src="images/ico_45.png" alt="" srcset="" style="width: 1.875rem;" />
								<div class="mt-1">100%</div>
							</div>
							<div>
								<img src="images/ico_46.png" alt="" srcset="" style="width: 1.875rem;" />
								<div class="mt-1">100%</div>
							</div>
							<div>
								<img src="images/ico_47.png" alt="" srcset="" style="width: 1.875rem;" />
								<div class="mt-1">100%</div>
							</div>
						</div>
						<div style="color: #666666;" class="mt-1">特别提示：因概率差异，可能导致商品重复出现</div>
					</div>
				</div>
				<img src="images/ico_48.png" alt="" srcset="" />
				<div class="blind-box-details-goods">
					<div class="blind-box-details-goods-item">
						<a href="goods-details.html">
							<div class="mui-row">
								<div class="mui-col-xs-3" style="position: relative;">
									<img src="images/pic_23.jpg" alt="" srcset=""
										class="blind-box-details-goods-item-img" />
									<img src="images/ico_47.png" alt="" srcset=""
										class="blind-box-details-goods-item-subscript" />
								</div>
								<div class="mui-col-xs-9">
									<div style="padding-left: 0.625rem;">
										<div style="font-size: 0.9375rem;">苹果14 Pro Max 512G</div>
										<div style="margin-top: 1.25rem;color: #ff4f00;">￥12999.00</div>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class="blind-box-details-goods-item">
						<a href="goods-details.html">
							<div class="mui-row">
								<div class="mui-col-xs-3" style="position: relative;">
									<img src="images/pic_24.jpg" alt="" srcset=""
										class="blind-box-details-goods-item-img" />
									<img src="images/ico_46.png" alt="" srcset=""
										class="blind-box-details-goods-item-subscript" />
								</div>
								<div class="mui-col-xs-9">
									<div style="padding-left: 0.625rem;">
										<div style="font-size: 0.9375rem;">苹果14 Pro Max 512G</div>
										<div style="margin-top: 1.25rem;color: #ff4f00;">￥12999.00</div>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class="blind-box-details-goods-item">
						<a href="goods-details.html">
							<div class="mui-row">
								<div class="mui-col-xs-3" style="position: relative;">
									<img src="images/pic_25.jpg" alt="" srcset=""
										class="blind-box-details-goods-item-img" />
									<img src="images/ico_45.png" alt="" srcset=""
										class="blind-box-details-goods-item-subscript" />
								</div>
								<div class="mui-col-xs-9">
									<div style="padding-left: 0.625rem;">
										<div style="font-size: 0.9375rem;">苹果14 Pro Max 512G</div>
										<div style="margin-top: 1.25rem;color: #ff4f00;">￥12999.00</div>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class="blind-box-details-goods-item">
						<a href="goods-details.html">
							<div class="mui-row">
								<div class="mui-col-xs-3" style="position: relative;">
									<img src="images/pic_26.jpg" alt="" srcset=""
										class="blind-box-details-goods-item-img" />
									<img src="images/ico_44.png" alt="" srcset=""
										class="blind-box-details-goods-item-subscript" />
								</div>
								<div class="mui-col-xs-9">
									<div style="padding-left: 0.625rem;">
										<div style="font-size: 0.9375rem;">苹果14 Pro Max 512G</div>
										<div style="margin-top: 1.25rem;color: #ff4f00;">￥12999.00</div>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class="blind-box-details-goods-item">
						<a href="goods-details.html">
							<div class="mui-row">
								<div class="mui-col-xs-3" style="position: relative;">
									<img src="images/pic_27.jpg" alt="" srcset=""
										class="blind-box-details-goods-item-img" />
									<img src="images/ico_44.png" alt="" srcset=""
										class="blind-box-details-goods-item-subscript" />
								</div>
								<div class="mui-col-xs-9">
									<div style="padding-left: 0.625rem;">
										<div style="font-size: 0.9375rem;">苹果14 Pro Max 512G</div>
										<div style="margin-top: 1.25rem;color: #ff4f00;">￥12999.00</div>
									</div>
								</div>
							</div>
						</a>
					</div>
					<div class="blind-box-details-goods-item">
						<a href="goods-details.html">
							<div class="mui-row">
								<div class="mui-col-xs-3" style="position: relative;">
									<img src="images/pic_28.jpg" alt="" srcset=""
										class="blind-box-details-goods-item-img" />
									<img src="images/ico_44.png" alt="" srcset=""
										class="blind-box-details-goods-item-subscript" />
								</div>
								<div class="mui-col-xs-9">
									<div style="padding-left: 0.625rem;">
										<div style="font-size: 0.9375rem;">苹果14 Pro Max 512G</div>
										<div style="margin-top: 1.25rem;color: #ff4f00;">￥12999.00</div>
									</div>
								</div>
							</div>
						</a>
					</div>
				</div>
				<div id="picture" class="mui-popover mui-popover-action mui-popover-bottom">
					<div class="goods-details-model">
						<div style="text-align: center;padding: 0.625rem 0">确认支付</div>

						<div class="mui-row" style="padding: 0.625rem;">
							<div class="mui-col-xs-3">
								<img src="images/pic_27.jpg" alt="" style="width: 100%;" />
							</div>
							<div class="mui-col-xs-9" style="padding-left: 0.625rem;">
								<div class="title mb-2" style="	font-size: 0.9375rem;">苹果14 Pro Max 512G</div>
								<div class="goods-price-group">
									<div style="display: flex;align-items: center;">
										<div><span>到手价￥</span>
											<span class="price">0.01</span>
										</div>
										<span class="ml-2">原价￥12999.00</span>
									</div>
									<div>已售 1000+</div>
								</div>
								<div style="font-size: 0.75rem;color: #999999;margin-top: 0.625rem;">
									该商品为开合商品，不支持7天无理由退换货</div>
							</div>
						</div>
						<div class="mt-2 mb-2" style="background: #f8f8f8;height: 0.25rem;width: 100vw;"></div>
						<div style="padding: 0.625rem;">
							<div
								style="display: flex;align-items: center;justify-content: space-between;font-size: 0.9375rem;">
								<div>优惠券</div>
								<a href=""
									style="display: flex;align-items: center;font-size: 0.75rem;color: #666666;">选择优惠券
									<img src="images/ico_15.png" alt=""
										style="width: 0.625rem;margin-left: 0.625rem;" />
								</a>

							</div>
						</div>
						<div class=" mb-2" style="background: #f8f8f8;height: 0.25rem;width: 100vw;"></div>
						<div class="mui-card">
							<form class="mui-input-group">
								<div class="mui-input-row mui-radio">
									<label style="display: flex;align-items: center;">
										<img src="images/ico_42.png" alt=""
											style="width: 1.5rem;height: 1.5rem;margin-right: 0.625rem;" />
										微信</label>
									<input name="radio1" type="radio">
								</div>
								<div class="mui-input-row mui-radio">
									<label style="display: flex;align-items: center;">
										<img src="images/ico_43.png" alt=""
											style="width: 1.5rem;height: 1.5rem;margin-right: 0.625rem;" />
										支付宝</label>
									<input name="radio1" type="radio">
								</div>

							</form>
						</div>
						<a href="order-list.html" class="pay">立即支付 ￥：0.01</a>
						<!--  -->
					</div>


				</div>
			</div>
			<nav class="mui-bar mui-bar-tab">
				<a href="#picture">
					<button type="button" class="mui-btn">立即开盒</button>
				</a>
			</nav>
		</div>

		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
			mui('body').on('tap', 'a', function() {
				document.location.href = this.href;
			});
			var gallery = mui('.mui-slider');
			gallery.slider({
				interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
			});
			mui('body').on('shown', '.mui-popover', function(e) {
				//console.log('shown', e.detail.id);//detail为当前popover元素
			});
			mui('body').on('hidden', '.mui-popover', function(e) {
				//console.log('hidden', e.detail.id);//detail为当前popover元素
			});
			var info = document.getElementById("info");
			mui('body').on('tap', '.mui-popover-action li>a', function() {
				var a = this,
					parent;
				//根据点击按钮，反推当前是哪个actionsheet
				for (parent = a.parentNode; parent != document.body; parent = parent.parentNode) {
					if (parent.classList.contains('mui-popover-action')) {
						break;
					}
				}
				//关闭actionsheet
				mui('#' + parent.id).popover('toggle');
				info.innerHTML = "你刚点击了\"" + a.innerHTML + "\"按钮";
			})
		</script>
	</body>

</html>